<!-- 系统错误日志 -->
<template>
  <main class="page-main">
    <div class="padding-20">

      <!-- 查询、新增-->
      <a-form layout="inline" :model="queryData" autocomplete="off">
        <a-form-item label="错误类型：" name="errorClass">
          <a-input v-model:value="queryData.errorClass" />
        </a-form-item>
        <a-form-item label="报错类名：" name="sourceClass">
          <a-input v-model:value="queryData.sourceClass" />
        </a-form-item>
        <a-form-item label="报错方法：" name="sourceMethod">
          <a-input v-model:value="queryData.sourceMethod" />
        </a-form-item></a-form>

      <div class="margin-top-10">
        <!-- 操作按钮 -->
        <a-row>
          <a-col :span="12">

          </a-col>
          <a-col :span="12" class="text-right">
            <a-space size="large">
              <a-button type="default" @click="handleCleanQueryData">
                <template #icon>
                  <RedoOutlined />
                </template>
                重置
              </a-button>
              <a-button type="primary" @click="handleQueryList">
                <template #icon>
                  <SearchOutlined />
                </template>
                查询
              </a-button>
              <a-button type="dashed" @click="handleExport">
                <template #icon>
                  <DownloadOutlined />
                </template>
                导出
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </div>

      <!-- 表格 -->
      <div class="margin-top-10">
        <a-table :columns="columns" :data-source="dataList" :pagination="false">
          <template #bodyCell="{ column, record  }">
            <template v-if="column.key === 'actionColumn'">
              <TableOperation @onEdit="handleEditMode(record.id)" @onDelete="handleDeleteMode(record.id)" />
            </template>
          </template>
        </a-table>

        <!-- 分页 -->
        <div class="float-right margin-10-20">
          <a-pagination v-model:current="queryData.pageNo" :total="queryData.count" show-size-changer
            :page-size-options="pageSizeOptions" @showSizeChange="handleChange" @change="handleChange" />
        </div>
      </div>
    </div>

    <!-- 新增、编辑的表单-->
    <a-drawer v-model:open="mode.edit" :title="currentId?'修改系统错误日志':'添加系统错误日志'" size="large">
      <Form :dataId="currentId" @close="handleCancel" @successed="handleQueryList" />
    </a-drawer>

    <!-- 删除 -->
    <a-modal v-model:open="mode.delete" title="确定删除">
      <span>确定删除系统错误日志吗？删除后数据不可恢复</span>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" danger @click="handleDelete">删除</a-button>
      </template>
    </a-modal>

  </main>
</template>
<script lang="ts">
import PageHeader from "@/components/PageHeader.vue";
import PageFoot from "@/components/PageFoot.vue";
import * as apiUtil from "@/api/ApiUtils";
import * as api from "@/api/ErrorLogApi";
import Form from "./form.vue";
import TableOperation from "@/components/TableOperation.vue";
import { notification } from "ant-design-vue";
import {
  DownloadOutlined,
  SearchOutlined,
  PlusOutlined,
  RedoOutlined,
} from "@ant-design/icons-vue";

export default {
  components: {
    PageHeader,
    PageFoot,
    Form,
    TableOperation,
    DownloadOutlined,
    SearchOutlined,
    PlusOutlined,
    RedoOutlined,
  },
  data() {
    return {
      columns: [
        { title: "序号", dataIndex: "id", key: "id", width: 100 },
        {
          title: "错误类型",
          dataIndex: "errorClass",
          key: "errorClass",
          ellipsis: true,
        },
        {
          title: "错误信息",
          dataIndex: "message",
          key: "message",
          ellipsis: true,
        },
        {
          title: "报错类名",
          dataIndex: "sourceClass",
          key: "sourceClass",
          ellipsis: true,
        },
        {
          title: "报错方法",
          dataIndex: "sourceMethod",
          key: "sourceMethod",
          ellipsis: true,
        },
        {
          title: "行号",
          dataIndex: "sourceLine",
          key: "sourceLine",
          width: 80,
        },
        {
          title: "时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 180,
        },
        { title: "操作", key: "actionColumn", width: 100 },
      ],
      pageSizeOptions: ["10", "20", "50", "100"],
      //数据列表
      dataList: [],
      //当前操作的数据Id
      currentId: 0,
      //查询数据
      queryData: {
        count: 0,
        pageNo: 1,
        pageSize: 10,
      },
      //模式
      mode: {
        //编辑模式
        edit: false,
        //删除模式
        delete: false,
      },
    };
  },
  methods: {
    /**
     * 查询列表
     */
    handleQueryList() {
      api.queryList(this.queryData).then((res) => {
        //请求成功
        if (apiUtil.isSuccessed(res)) {
          if (res.data.records) {
            const data = res.data;
            this.dataList = data.records;
            this.queryData.count = data.count;
            this.queryData.pageNo = data.pageNo;
            this.queryData.pageSize = data.pageSize;
          }
        } else {
          //请求失败
          notification.error({
            message: "查询失败",
            description: res.message,
          });
        }
      });
    },

    /**
     * 删除数据
     */
    handleDelete() {
      api.deleteById(this.currentId).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          notification.success({
            message: "删除成功",
            description: "已删除",
          });
          this.mode.delete = false;
          this.handleQueryList();
        } else {
          //请求失败
          notification.error({
            message: "删除失败",
            description: res.message,
          });
        }
      });
    },
    /**
     * 进入新增模式
     */
    handleAddMode() {
      this.currentId = null;
      this.mode.edit = true;
    },
    /**
     * 进入编辑模式
     * @param id 要编辑的数据ID
     */
    handleEditMode(id) {
      this.currentId = id;
      this.mode.edit = true;
    },
    /**
     * 进入删除模式
     * @param index 行号
     * @param row 要删除的数据
     */
    handleDeleteMode(id) {
      this.currentId = id;
      this.mode.delete = true;
    },
    /**
     * 取消编辑/删除操作
     */
    handleCancel() {
      this.mode.edit = false;
      this.mode.delete = false;
      this.currentId = null;
    },
    /**
     * 分页大小改变
     * @param val
     */
    handleChange(current, size) {
      this.queryData.pageSize = size;
      this.queryData.pageNo = current;
      this.handleQueryList();
    },

    /**
     * 重置查询条件
     */
    handleCleanQueryData() {
      this.queryData = {
        count: this.queryData.count,
        pageNo: this.queryData.pageNo,
        pageSize: this.queryData.pageSize,
      };
      this.handleQueryList();
    },
    /**
     * 导出数据
     */
    handleExport() {
      api.exportList(this.queryData);
    },
  },
  computed: {},
  watch: {},
  mounted() {
    this.handleQueryList();
  },
};
</script>
<style scoped>
</style>